<template>
    <div class="p-6 space-y-6">
        <!-- 页面标题 -->
        <div class="flex items-center justify-between">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">个人信息</h2>
            <button @click="saveProfile"
                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                保存更改
            </button>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧：头像和基本信息 -->
            <div class="lg:col-span-2 space-y-6">
                <!-- 头像设置 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">头像设置</h3>
                    <div class="flex items-center gap-6">
                        <div class="relative">
                            <img :src="profile.avatar" alt="头像"
                                 class="w-24 h-24 rounded-full border-4 border-gray-200 dark:border-gray-700">
                            <button @click="triggerFileInput"
                                    class="absolute -bottom-2 -right-2 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </button>
                            <input ref="fileInput" type="file" accept="image/*" class="hidden"
                                   @change="handleAvatarChange">
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium text-gray-800 dark:text-gray-200 mb-2">{{ profile.realName }}</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">{{ profile.email }}</p>
                            <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                                <span>注册时间：{{ profile.registerTime }}</span>
                                <span>最后登录：{{ profile.lastLoginTime }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 基本信息 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">基本信息</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">用户名</label>
                            <input v-model="profile.username" type="text" class="input" placeholder="请输入用户名">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">真实姓名</label>
                            <input v-model="profile.realName" type="text" class="input" placeholder="请输入真实姓名">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">邮箱</label>
                            <input v-model="profile.email" type="email" class="input" placeholder="请输入邮箱">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">手机号</label>
                            <input v-model="profile.phone" type="tel" class="input" placeholder="请输入手机号">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">性别</label>
                            <select v-model="profile.gender" class="input">
                                <option value="">请选择性别</option>
                                <option value="male">男</option>
                                <option value="female">女</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">生日</label>
                            <input v-model="profile.birthday" type="date" class="input">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">个人简介</label>
                            <textarea v-model="profile.bio" rows="3" class="input resize-none"
                                      placeholder="请输入个人简介"></textarea>
                        </div>
                    </div>
                </div>

                <!-- 工作信息 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">工作信息</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">部门</label>
                            <input v-model="profile.department" type="text" class="input" placeholder="请输入部门">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">职位</label>
                            <input v-model="profile.position" type="text" class="input" placeholder="请输入职位">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">工号</label>
                            <input v-model="profile.employeeId" type="text" class="input" placeholder="请输入工号">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">入职时间</label>
                            <input v-model="profile.hireDate" type="date" class="input">
                        </div>
                    </div>
                </div>

                <!-- 地址信息 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">地址信息</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">所在城市</label>
                            <input v-model="profile.city" type="text" class="input" placeholder="请输入城市">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">详细地址</label>
                            <input v-model="profile.address" type="text" class="input" placeholder="请输入详细地址">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧：安全设置和统计信息 -->
            <div class="space-y-6">
                <!-- 安全设置 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">安全设置</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div
                                     class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none"
                                         stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800 dark:text-gray-200">密码</h4>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">上次修改：{{
                                        profile.lastPasswordChange }}</p>
                                </div>
                            </div>
                            <button @click="$router.push('/profile/password')"
                                    class="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
                                修改
                            </button>
                        </div>

                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div
                                     class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none"
                                         stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800 dark:text-gray-200">两步验证</h4>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ profile.twoFactorEnabled ?
                                        '已启用' : '未启用' }}</p>
                                </div>
                            </div>
                            <button @click="toggleTwoFactor" :class="[
                                'px-3 py-1 text-sm rounded transition-colors',
                                profile.twoFactorEnabled
                                    ? 'bg-red-600 text-white hover:bg-red-700'
                                    : 'bg-green-600 text-white hover:bg-green-700'
                            ]">
                                {{ profile.twoFactorEnabled ? '禁用' : '启用' }}
                            </button>
                        </div>

                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div
                                     class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none"
                                         stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800 dark:text-gray-200">登录设备</h4>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ profile.activeDevices }}个活跃设备
                                    </p>
                                </div>
                            </div>
                            <button
                                    class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                管理
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 账户统计 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">账户统计</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">登录次数</span>
                            <span class="font-semibold text-gray-800 dark:text-gray-200">{{ profile.loginCount }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">在线时长</span>
                            <span class="font-semibold text-gray-800 dark:text-gray-200">{{ profile.onlineTime }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">最后活跃</span>
                            <span class="font-semibold text-gray-800 dark:text-gray-200">{{ profile.lastActiveTime
                                }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">账户状态</span>
                            <span :class="[
                                'px-2 py-1 text-xs rounded-full',
                                profile.status === 'active'
                                    ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
                                    : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200'
                            ]">
                                {{ profile.status === 'active' ? '正常' : '禁用' }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- 快捷操作 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">快捷操作</h3>
                    <div class="space-y-2">
                        <button @click="$router.push('/profile/password')"
                                class="w-full text-left px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
                            修改密码
                        </button>
                        <button @click="exportData"
                                class="w-full text-left px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
                            导出数据
                        </button>
                        <button @click="deleteAccount"
                                class="w-full text-left px-3 py-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
                            删除账户
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="profile-info">
import { ref } from 'vue'

const fileInput = ref<HTMLInputElement>()

// 模拟个人信息数据
const profile = ref({
    username: 'admin',
    realName: '张三',
    email: 'admin@example.com',
    phone: '13800138000',
    gender: 'male',
    birthday: '1990-01-01',
    bio: '热爱技术，专注于前端开发和用户体验设计。',
    department: '技术部',
    position: '前端工程师',
    employeeId: 'EMP001',
    hireDate: '2023-01-01',
    city: '北京',
    address: '朝阳区xxx街道xxx号',
    avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=admin',
    registerTime: '2023-01-01',
    lastLoginTime: '2024-01-15 10:30:00',
    lastPasswordChange: '2024-01-01',
    twoFactorEnabled: false,
    activeDevices: 2,
    loginCount: 156,
    onlineTime: '24小时',
    lastActiveTime: '2024-01-15 10:30:00',
    status: 'active'
})

defineOptions({ name: 'profile-info' })

function triggerFileInput() {
    fileInput.value?.click()
}

function handleAvatarChange(event: Event) {
    const target = event.target as HTMLInputElement
    const file = target.files?.[0]
    if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
            profile.value.avatar = e.target?.result as string
        }
        reader.readAsDataURL(file)
    }
}

function toggleTwoFactor() {
    profile.value.twoFactorEnabled = !profile.value.twoFactorEnabled
}

function saveProfile() {
    // 这里可以调用 API 保存个人信息
    console.log('保存个人信息:', profile.value)
}

function exportData() {
    // 这里可以调用 API 导出用户数据
    console.log('导出用户数据')
}

function deleteAccount() {
    if (confirm('确定要删除账户吗？此操作不可恢复！')) {
        // 这里可以调用 API 删除账户
        console.log('删除账户')
    }
}
</script>